<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="108px">
        <el-form-item label="项目类型名称" prop="projectTypeName">
          <el-input
            v-model="queryParams.projectTypeName"
            placeholder="请输入项目类型名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="queryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-" 
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <TableCard>
        <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

          <el-table :border="Global.tableShowBorder" v-loading="loading" :data="list">
            <el-table-column label="项目名称" align="center" prop="projectName"/>
            <el-table-column label="项目类型名称" align="center" prop="projectTypeName"/>
            <el-table-column label="用户名" align="center" prop="createByName"/>
            <el-table-column label="昵称" align="center" prop="createByNickName"/>
            <el-table-column label="签到图片" align="center" prop="photoList">
              <template slot-scope="{row}">
                <el-link type="primary" v-if="row.photoList.length" @click="qiandao(row)" :underline="false">查看签到图片</el-link>
              </template>
            </el-table-column>
            <el-table-column label="经度" align="center" prop="lon"/>
            <el-table-column label="纬度" align="center" prop="lat"/>
            <el-table-column label="签到时间" align="center" prop="signInTime"/>
            <el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
      </TableCard>
    <el-image-viewer 
      v-if="showViewer"
      :url-list="srcList"
      :initialIndex="initialIndex"
      :on-close="closeViewer">
    </el-image-viewer>
  </div>
</template>

<script>
import {listProjSignIn,} from "@/api/collaWorryFree/projectSign";

export default {
  name: "ProjectSign",
  dicts: [],
  data() {
    return {
      showViewer: false,//取证图片显示
      initialIndex:0,//取证图片下标
      srcList:[],//取证图片
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],projectTypeName:null,projectName:null,
      },
    };
  },
  created() {
      this.getList();
  },
  methods: {
    // 敞开查看器
    closeViewer() {
      this.showViewer = false;
    },
    qiandao(row){//签到图片
      this.srcList = row.photoList
      this.showViewer = true
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let queryParams = {...this.queryParams}
      let dateRange = queryParams.dateRange || []
      if(dateRange.length) {
        queryParams.createStart = dateRange[0]
        queryParams.createEnd = dateRange[1]
      }
      delete queryParams.dateRange
      listProjSignIn(queryParams).then(response => {
        let rows = response.rows || [];
        this.list = rows.map(item=>{
          let photos = item.photos || ''
          return {
            ...item,photoList:photos ? photos.split(',') : [],
          }
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
